<template>
    <j-modal
      width="70%"
      title="账单匹配列表"
      :maskClosable="false"
      :destroyOnClose="true"
      :visible.sync="editModalVisible"
      @cancel="handleCancleDbSync"
      @ok="handleDbSync"
    >
      <template slot="footer">
        <div style="text-align:right;">
          <a-button @click="handleCancleDbSync">关闭</a-button>
          <a-button type="primary" :loading="syncLoading" @click="handleDbSync">确定</a-button>
        </div>
      </template>
      <vxe-grid
        ref="xTable"
        border
        resizable
        keep-source
        height="300px"
        align="center"
        :columns="column"
        :data="dataSource"
        :edit-rules="validRules"
        :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
        @checkbox-all="onSelectChange"
        @checkbox-change="onSelectChange"
      >
      </vxe-grid>
  </j-modal>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'AuditListModal',
  data() {
    return {
      editModalVisible: false,
      disableSubmit: false,
      syncLoading: false,
      url: {
        list: '/hr/officedoc/list',
        autoAmount: '/community/cash/autoAmount',
        addAmount: '/community/cash/addAmount'
      },
      dataSource: [],
      column: [
        { type: 'seq', width: 40 },
        { title: '账单编号', field: 'billCode' },
        { title: '账单类型', field: 'billType', slots: { default: ({ row }) => {
          return filterDictTextByCache('xy_park_bill_type', row.billType)
        } }},
        { title: '应收/应付日期', field: 'dueDate' },
        { title: '账单金额', field: 'amount' },
        { title: '已分配金额', field: 'sumCheckAmount' },
        { title: '剩余金额', field: 'surplusAmount' },
        { title: '分配金额', field: 'planAmount' },
        // { title: '分配金额', field: 'assignment', editRender: { name: '$input', props: { type: 'number' }}},
        { title: '关联合同', field: 'contractCode' }
      ],
      validRules: {
        assignment: [
          { validator: this.assignment }
        ]
      },
      selectedRowKeys: [],
      selectionRows: [],
      formData: {}
    }
  },
  methods: {
    edit(row) {
      this.formData = row
      this.editModalVisible = true
      this.loadData()
    },
    loadData() {
      // const amount = this.formData.checkAmount ? this.formData.amount - this.formData.checkAmount : this.formData.amount
      getAction(this.url.autoAmount, {
        // amount: amount,
        // cashMethod: this.formData.cashType,
        // accountCode: this.formData.accountCode
        cashCode: this.formData.cashCode
      }).then((res) => {
        if (res.success) {
          this.dataSource = res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    handleCancleDbSync() {
      this.editModalVisible = false
    },
    handleDbSync() {
      const tableData = this.$refs.xTable.getTableData()
      const data = []
      tableData.fullData.forEach(item => {
        data.push({
          billCode: item.billCode,
          cashCode: this.formData.cashCode,
          checkAmount: item.planAmount
        })
      })
      postAction(this.url.addAmount, data).then(res => {
        if (res.success) {
          this.editModalVisible = false
          this.$message.success('分配成功')
          this.$emit('ok')
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    assignment({ cellValue, row }) {
      if (Number(cellValue) > row.salaryTemplateDetail.upperLimit) {
        return new Error('总分配金额不能大于收支金额')
      }
    },
    onSelectChange({ records }) {
      this.selectedRowKeys = []
      records.forEach(item => {
        this.selectedRowKeys.push(item.id)
      })
      this.selectionRows = records
    }
  }
}
</script>
<style lang="less">

</style>
